<template>
  <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0">
    <!-- 表单设计器 -->
    <div
      class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]"
    >
      <fc-designer class="my-designer" ref="designer" :config="designerConfig" v-loading="loading">
        <template #handle>
          <el-button size="small" type="success" plain @click="handleSave">
            <Icon class="mr-5px" icon="ep:plus" />
            保存
          </el-button>
        </template>
      </fc-designer>
    </div>
  </ContentWrap>
</template>
<script lang="ts" setup>
import FcDesigner from '@form-create/designer'
import { useFormCreateDesigner } from '@/components/FormCreate'
import {ElAlert, ElDialog, ElMessage, ElMessageBox} from "element-plus";
import {ContractTemplateApi} from "@/views/ai/law/api/contracttemplate";

defineOptions({ name: 'BpmFormEditor' })
const route = useRoute();
const { push, currentRoute } = useRouter() // 路由
// 表单设计器配置
const designerConfig = reactive({
  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
  autoActive: true, // 是否自动选中拖入的组件
  useTemplate: false, // 是否生成vue2语法的模板组件
  formOptions: {
    form: {
      labelWidth: '100px' // 设置默认的 label 宽度为 100px
    }
  }, // 定义表单配置默认值
  fieldReadonly: false, // 配置field是否可以编辑
  hiddenDragMenu: false, // 隐藏拖拽操作按钮
  hiddenDragBtn: false, // 隐藏拖拽按钮
  hiddenMenu: [], // 隐藏部分菜单
  hiddenItem: [], // 隐藏部分组件
  hiddenItemConfig: {}, // 隐藏组件的部分配置项
  disabledItemConfig: {}, // 禁用组件的部分配置项
  showSaveBtn: false, // 是否显示保存按钮
  showConfig: true, // 是否显示右侧的配置界面
  showBaseForm: true, // 是否显示组件的基础配置表单
  showControl: true, // 是否显示组件联动
  showPropsForm: true, // 是否显示组件的属性配置表单
  showEventForm: true, // 是否显示组件的事件配置表单
  showValidateForm: true, // 是否显示组件的验证配置表单
  showFormConfig: true, // 是否显示表单配置
  showInputData: true, // 是否显示录入按钮
  showDevice: true, // 是否显示多端适配选项
  appendConfigData: [] // 定义渲染规则所需的formData
})
const designer = ref() // 表单设计器
useFormCreateDesigner(designer) // 表单设计器增强
/** 处理保存按钮 */
const handleSave = () => {
  ElMessageBox.confirm('是否保存您的配置?','Warning',{
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    if (contractTemplate.value){
      const id=contractTemplate.value.id
      const formId=contractTemplate.value.formId
      const option =designer.value.getOption()
      const formConfig = JSON.parse(designer.value.getJson())
      await ContractTemplateApi.saveTemplateFrom({
        fileTempId:id,
        formName:"表单",
        id:formId,
        option,
        formConfig
      })
      ElMessage.success({message:'保存成功'})
    }
  })
}
const contractTemplate=ref<any>()
const loadTemp=async ()=>{
  const id=Number(route.params.fid as string)
  contractTemplate.value=await ContractTemplateApi.getContractTemplate(id);
}
const loading=ref(false)
const init=async ()=>{
  loading.value = true
  await loadTemp()
  const formId=contractTemplate.value?.formId
  if (formId){
    //加载配置
    const config=await ContractTemplateApi.loadTemplateFrom(formId)
    designer.value?.setOption(config.option)
    designer.value?.setRule(config.formConfig)
  }
  loading.value = false
}
onMounted(()=>{
  init()
})

/** 初始化 **/
onMounted(async () => {
})
</script>

<style>
.my-designer {
  ._fc-l,
  ._fc-m,
  ._fc-r {
    border-top: none;
  }
}
</style>
